<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星</title>
		<style type="text/css">
			body {
				background-image: url("img/bacg.jpg");
				background-repeat: no-repeat;
				background-attachment: fixed;
				background: gainsboro url("img/bacg.jpg") no-repeat fixed center/100% 100%;
			}

			.box1 {
				position: relative;
				height: 600px;
				width: 300px;
			}

			.box1 img {
				position: absolute;
				top: 43px;
				left: 74px;
				height: 63px;
				width: 129px;
			}

			.box2 {
				position: relative;
				top: -583px;
				left: 1141px;
				height: 69px;
				width: 267px;
			}

			.box2 .xxbox3 {
				position: absolute;
				top: 9px;
				left: 16px;
				height: 41px;
				width: 88px;
				border: 1px solid white;
				border-radius: 21px;
			}

			.box2 .xxbox3 p {
				position: absolute;
				top: -2px;
				left: 24px;
				color: white;
				font-size: 18px;
				margin: 10px auto;
				width: 50px;
				height: 30px;
			}

			.box2 .xxbox4 {
				position: absolute;
				top: 9px;
				left: 129px;
				height: 42px;
				width: 121px;
				border: 1px solid white;
				border-radius: 21px;
			}

			.box2 .xxbox4 p {
				position: absolute;
				top: -1px;
				left: 24px;
				color: white;
				font-size: 18px;
				margin: 10px auto;
				width: 72px;
				height: 82px;

			}
			.mbox {
				width: 478px;
				height: 542px;
				position: absolute;
				top: 83px;
				left: 424px;
				background-color: white;
				margin: auto;
				border-radius: 12px;
			}
			.mbox .zh
			{
			position: absolute;
				top: 12px;
				left: 35px;
				width: 90px;
				height: 20px;
			}
			.mbox .zh p
			{
			/* text-decoration:  underline; */
			font-size: 19px;
			color: black;
			}
			.mbox .zh .xhx{
				position: absolute;
				top:43px;
				left:20px;
				width:37px;
				height:3px;
				background-color:orange;
			}
			.mbox .yzm 
			{
			position: absolute;
			top: 12px;
			left: 166px;
			width: 105px;
			height: 20px;	
			}
			.mbox .yzm p
			{	
			font-size: 19px;
			color:rgba(0, 0, 0, .5);
			}
		 .yhm{
			
				position: absolute;
				top: 92px;
				left:41px;
				width:389px;
				height:35px;
				border: 1px solid rgba(0, 0, 0, .1);	
			}
			 .yhm p{
				 position: absolute;
				 top: -6px;
				 left: 20px;
				font-size: 15px;
				color: rgba(0, 0, 0, .3);
			}
			.qsr {
				position: absolute;
				top: 143px;
				left:41px;
				width:389px;
				height:35px;
				border: 1px solid rgba(0, 0, 0, .1);	
			}
			.qsr p
			{
			position: absolute;
			 top: -10px;
			 left: 20px;
			font-size: 15px;
			color: rgba(0, 0, 0, .3);	
			}
			.xxx{
				position: absolute;
				top: 201px;
				left:42px;
				width: 19px;
				height: 17px;
			 border: 1px solid rgba(0, 0, 0, .3);
			}
			.box4{
				position: absolute;
				top: 177px;
				left:54px;
				width: 100px;
				height: 30px;
			}
			.box4 p
			{
			position: absolute;	
			top: 11px;
			left: 20px;
			font-size: 13px ;
			color: rgba(0, 0, 0, .3);
			}
			.mima
			{
			position: absolute;
			top: 177px;
			left:304px;
			width:136px;
			height:30px;	
			}
			.mima p{
			position: absolute;
			top: 11px;
			left: 20px;
			font-size: 13px ;
			color: rgba(0, 0, 0, 0.5);
			text-decoration: underline;
			}
			.denglu{
			position: absolute;
			top: 250px;
			left:44px;
			width:397px;
			height:30px;
			background-color: orange;
			}
			.denglu p
			{
			position: absolute;
			top: -12px;
			left:178px;
			font-size: 15px;
			color: white;
			}
			.ljzc{
			position: absolute;
			top:307px;
			left:31px;
			width:271px;
			height:30px;
			 /* background-color: blueviolet;	 */
			}
			.ljzc p{
			position: absolute;
			height: 12px;
			width: 69px;
			top: -12px;
			left:181px;
			font-size: 15px;
			color:blue;	
			text-decoration: underline;
			}
			.zuoxian
			{
			position: absolute;
			top: 372px;
			left: 44px;
			width:131px;
			height:0px;
			border: 1px solid rgba(0, 0, 0, .1);
			}
			.gddlu
			{
			position: absolute;
			top:362px;
			left:190px;
			width:110px;
			height:20px;	
			}
			.gddlu p
			{
				position: absolute;
				top:-10px;
				left:12px;
				width: 73px;
				height: 40px;
				font-size: 12px;
				color: rgba(0, 0, 0, .4);
			}
			.youxian
			{
			position: absolute;
			top: 372px;
			left: 296px;
			width:131px;
			height:0px;
			border: 1px solid rgba(0, 0, 0, .1);	
			}
			.qq
			{
			position: absolute;
			top: 425px;
			left:57px;
			width:45px;
			height:42px;	
			border-radius:34px;
			background-color:white;
			border:1px solid rgba(0, 0, 0, .1) ;
			}
			.qq img
			{
			position: absolute;
			top:12px;
			left:12px;
			width:22px;
			height:20px;	
			}
			.qq p
			{
			position: absolute;
			top:39px;
			left:-3px;
			width:132px;
			height:50px;
			color: rgba(0, 0, 0, .3);
			}
			.wwx
			{
			position: absolute;
			top: 425px;
			left:213px;
			width:45px;
			height:42px;	
			border-radius:34px;
			background-color:white;
			border:1px solid rgba(0, 0, 0, .1) ;	
			}
			.wwx img
			{
			position: absolute;
			top:12px;
			left:12px;
			width:22px;
			height:20px;	
			}
			.wwx p
			{
			position: absolute;
			top:39px;
			left:-3px;
			width:132px;
			height:50px;
			color: rgba(0, 0, 0, .3);	
			}
			.qye
			{
			position: absolute;
			top: 425px;
			left:361px;
			width:45px;
			height:42px;	
			border-radius:34px;
			background-color:white;
			border:1px solid rgba(0, 0, 0, .1) ;	
			}
			.qye img
			{
			position: absolute;
			top:12px;
			left:12px;
			width:22px;
			height:20px;	
			}
			.qye p
			{
			position: absolute;
			top:39px;
			left:-3px;
			width:132px;
			height:50px;
			color: rgba(0, 0, 0, .3);	
			}
			.box5{
			position: relative;
			top:518px;
			left:661px;
			width:375px;
			height: 60px;
			}
			.box5 h1
			{
			position: absolute;
			top:9px;
			left:180px;
			width:145px;
			height: 60px;	
			font-size: 15px;
			color: #9e9e9e;;	
			}
			.box5 h2
			{
				position: absolute;
				top:32px;
				left:186px;
				width:225px;
				height: 60px;
				font-size: 13px;
				color: #9e9e9e;
			}
		</style>
	</head>
	<body>
		<div class="box1" class>
			<img src="img/wjx.png" />
		</div>
		<div class="box2">
			<div class="xxbox3">
				<p>注册</p>
			</div>
			<div class="xxbox4">
				<p>返回首页</p>
			</div>
		</div>
		<div class="mbox">
		<div class="zh">
			<p>账号登录</p>
			<div class="xhx"></div>
		</div>	
		<div class="yzm">
			<p>验证码登录</p>
		</div>
			<div class="yhm">
				<p>用户名/Email/手机</p>
			</div>
			<div class="qsr">
				<p>请输入登录密码</p>
			</div>
			<div class="box3">
				<div class="zfx"></div>
				<div class="xczd"></div>
				<div class="xdyhm"></div>
			</div>
		<div class="xxx"></div>
		<div class="box4">
			<p>下次自动登录</p>
		</div>
		<div class="mima">
			<p>忘记用户名/密码？</p>
		</div>
		<div class="denglu">
			<p>登录</p>
		</div>
		<div class="ljzc">
			<p>立即注册</p>
		</div>
		<div class="zuoxian"></div>
		<div class="gddlu">
			<p>更多登录方式</p>
		</div>
		<div class="youxian"></div>
		<div class="qq">
			<img src="img/QQ.jpg"/>
			<p>QQ登录</p>
		</div>
		<div class="wwx">
			<img src="img/wx.jpg"/>
			<p>微信登录</p>
		</div>
		<div class="qye">
			<img src="img/qy.jpg"/>
			<p>企业微信</p>
		</div>
		<div class="box5">
			<h1>《登顶武功山》</h1>
			<h2> 拍摄于问卷星团队二月徒步之旅</h2>
		</div>
		</div>

	</body>
</html>